<template>
  <div>
    <a v-bind:href="link" v-bind:title="title" v-bind:alt="title">去百度</a
    ><br />
    <a :href="link" :title="title" :alt="title">去百度</a><br />
    <!-- <button type="button" v-on:click="count += 1">{{ count }}</button> -->
    <button type="button" @click="add">{{ count }}</button>
    <button type="button" @click="add1(2)">{{ count }}</button>
    <a href="http://www.baidu.com" @click="fn">去百度</a>
    <a href="http://www.baidu.com" @click="fn($event)">去百度</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      link: "http://www.baidu.com",
      title: "我是标题，我会显示",
      count: 1,
    };
  },
  //   事件有两行以上就用methods对象里面
  methods: {
    add() {
      this.count = this.count + 10;
    },
    add1(num) {
      this.count += num;
    },
    fn(e) {
      console.log(e);
      e.preventDefault();
    },
  },
};
</script>

<style scoped>
button {
  width: 50px;
  height: 30px;
  color: brown;
  font-weight: bold;
}
</style>
